<template>
<div>
  <button @click="show()">{{text}}</button>
  <ul>
    <li @click="num=1">新闻中心a</li>
    <li @click="num=2">关于我们</li>
    <li @click="num=3">华为资讯</li>
    <li @click="num=4">数字校园</li>
    <li @click="num=5">运营模式</li>
    <li @click="num=123">其它</li>
  </ul>
  <div class="cont" v-if="shows">
    <div v-if="num==1">这里是新闻中心模块</div>
    <div v-else-if="num==2">这里是关于我们模块</div>
    <div v-else-if="num==3">这里是华为资讯模块</div>
    <div v-else-if="num==4">这里是数字校园模块</div>
    <div v-else-if="num==5">这里是运营模式模块</div>
    <div v-else>这里是其它内容的内容详情区</div>
  </div>
</div>
</template>

<script>
const date={
  num:1,
  shows:true,
  text:"隐藏内容显示区",
};
export default {
  name: "App",
  data(){
    return date;
  },
  methods:{
    show(){
      if (this.shows){
        this.shows=false;
        this.text="显示内容显示区";
      }else {
        this.shows=true;
        this.text="隐藏内容显示区";
      }
    },
  },
};
</script>

<style scoped>
ul{
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
ul li{
  float: left;
  list-style: none;
  width: 80px;
  background-color: chartreuse;
  text-align: center;
  line-height: 38px;
}
.cont{
  width: 480px;
  height: 300px;
background-color: aqua;
}
</style>